<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二）） | 海晨忆的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  
  
  <meta name="description" content="个人博客：haichenyi.com。感谢关注 回顾上一篇，我们讲到了Ultra-Pull-To-Refresh的基本用法。分成四步：  xml里面定义控件PtrFrameLayout  设置相关属性  添加Header，Footer，并监听  监听刷新过程">
<meta property="og:type" content="article">
<meta property="og:title" content="Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））">
<meta property="og:url" content="https://haichenyi.com/2018/05/13/Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））/index.html">
<meta property="og:site_name" content="海晨忆的博客">
<meta property="og:description" content="个人博客：haichenyi.com。感谢关注 回顾上一篇，我们讲到了Ultra-Pull-To-Refresh的基本用法。分成四步：  xml里面定义控件PtrFrameLayout  设置相关属性  添加Header，Footer，并监听  监听刷新过程">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2018-05-13T14:37:02.365Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））">
<meta name="twitter:description" content="个人博客：haichenyi.com。感谢关注 回顾上一篇，我们讲到了Ultra-Pull-To-Refresh的基本用法。分成四步：  xml里面定义控件PtrFrameLayout  设置相关属性  添加Header，Footer，并监听  监听刷新过程">
  
    <link rel="alternate" href="/atom.xml" title="海晨忆的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/uploads/artistic_image/head.jpg">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/highlight.css">
  <script>
  let antiquityStorage = window.sessionStorage.getItem('antiquitySessionStorage');
  if (antiquityStorage == '' || antiquityStorage == null) {
    var antiquityLoader = '<div id="loaderbox"><div class="loader"><div class="load-roll"><div class="load-top"></div><div class="load-right"></div><div class="load-bottom"></div></div></div></div>';
    document.write(antiquityLoader);
    document.body.style.overflow = 'hidden'
  }
  </script>
</head>

<body>
  <div id="fullpage" class="mobile-nav-right">
    
      <div id="wrapper" style="background-image: url(/uploads/artistic_image/bg.jpg)" title="背景图片来自网络">
    
    
      <header id="header">
  <div id="nav-toggle" class="nav-toggle"></div>
  <div class="head-box global-width">
    <nav class="nav-box nav-right">
      
        <a class="nav-item" href="/" title
        
        >首页</a>
      
        <a class="nav-item" href="/archives" title
        
        >归档</a>
      
        <a class="nav-item" href="/about" title
        
        >简历</a>
      
    </nav>
  </div>
</header>
      <div id="middlecontent" title class="global-width sidebar-left">
        <section id="main"><article id="post-Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））" class="article global-container article-type-post" itemscope itemprop="blogPost">
  
    <header class="article-header">
      
  
    <h1 class="article-title" itemprop="name">
      Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））
    </h1>
  

    </header>
  
  <div class="article-meta">
    <a href="/2018/05/13/Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））/" class="article-date">
  <time datetime="2018-05-13T14:26:56.000Z" itemprop="datePublished">2018-05-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Android-常用功能/">Android -常用功能</a>
  </div>

    
  </div>
  
    <span id="busuanzi_container_page_pv">
      本文总阅读量<span id="busuanzi_value_page_pv"></span>次
    </span>
  

  <div class="article-inner">
    
    <div class="article-content article-content-cloud doorframe mac" itemprop="articleBody">
      
        <p><strong>个人博客：haichenyi.com。感谢关注</strong></p>
<h2 id="回顾"><a href="#回顾" class="headerlink" title="回顾"></a>回顾</h2><p>上一篇，我们讲到了Ultra-Pull-To-Refresh的基本用法。分成四步：</p>
<ol>
<li><p>xml里面定义控件PtrFrameLayout</p>
</li>
<li><p>设置相关属性</p>
</li>
<li><p>添加Header，Footer，并监听</p>
</li>
<li><p>监听刷新过程</p>
<a id="more"></a>
</li>
</ol>
<h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><p>&emsp;&emsp;<strong>目的：</strong> 做一个我们自己的自定义刷新的动画（我们先不管动画是什么，不同的需求，动画都不一样）</p>
<p>&emsp;&emsp;我们前面讲到的主要类无非就是两个： <strong><em>PtrFrameLayout</em></strong>，<strong><em>Header（Footer）</em></strong>，前者是刷新控件，监听刷新过程，后者是头布局（脚布局），以添加头布局为例：我们这里首先就会想到重写这个布局。辣么？怎么重写这个头布局呢？我们先来看看怎么添加这个头布局的：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">public void setHeaderView(View header) &#123;</span><br><span class="line">        if (mHeaderView != null &amp;&amp; header != null &amp;&amp; mHeaderView != header) &#123;</span><br><span class="line">            removeView(mHeaderView);</span><br><span class="line">        &#125;</span><br><span class="line">        ViewGroup.LayoutParams lp = header.getLayoutParams();</span><br><span class="line">        if (lp == null) &#123;</span><br><span class="line">            lp = new LayoutParams(-1, -2);</span><br><span class="line">            header.setLayoutParams(lp);</span><br><span class="line">        &#125;</span><br><span class="line">        mHeaderView = header;</span><br><span class="line">        addView(header);</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure></div>
<p>它这里实际上就是添加了一个View，所以，我们随便写一个自定义View，继承View就可以传进来</p>
<p>&emsp;&emsp;我们，再来看看另一个方法，就是监听的方法，这里好像也是传的View对象，因为，我们前面写的时候就是传的header：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">public void addPtrUIHandler(PtrUIHandler ptrUIHandler) &#123;</span><br><span class="line">        PtrUIHandlerHolder.addHandler(mPtrUIHandlerHolder, ptrUIHandler);</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;咦，不对啊，这里不是应该传的View对象么？怎么是PtrUIHandler类型的。其实，你看名字就应该看的出来，他这里传的是一个PtrUIHandler对象，点进去看，他就是一个接口。里面是下拉刷新的回调。讲到这里，我们就应该明了了，就是一个自定义View，继承View，实现PtrUIHandler接口。辣么，就开始撸了。</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line"> * Author: 海晨忆</span><br><span class="line"> * Date: 2018/3/23</span><br><span class="line"> * Desc:</span><br><span class="line"> */</span><br><span class="line">public class MyCustomHeader extends FrameLayout implements PtrUIHandler &#123;</span><br><span class="line">  public MyCustomHeader(@NonNull Context context) &#123;</span><br><span class="line">    this(context, null);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  public MyCustomHeader(@NonNull Context context, @Nullable AttributeSet attrs) &#123;</span><br><span class="line">    this(context, attrs, 0);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  public MyCustomHeader(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) &#123;</span><br><span class="line">    super(context, attrs, defStyleAttr);</span><br><span class="line">    initView();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  private void initView() &#123;</span><br><span class="line">    LayoutInflater.from(getContext()).inflate(R.layout.header_layout, this);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @Override</span><br><span class="line">  public void onUIReset(PtrFrameLayout frame) &#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @Override</span><br><span class="line">  public void onUIRefreshPrepare(PtrFrameLayout frame) &#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @Override</span><br><span class="line">  public void onUIRefreshBegin(PtrFrameLayout frame) &#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @Override</span><br><span class="line">  public void onUIRefreshComplete(PtrFrameLayout frame, boolean isHeader) &#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @Override</span><br><span class="line">  public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status,</span><br><span class="line">                                 PtrIndicator ptrIndicator) &#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;可以看到，我这里面什么都没有，就是继承了FrameLayout布局，实现了PtrUIHandler接口，然后在构造方法里面加载了一个布局，添加进来，布局也很简单，里面就只有一个ImageView。布局如下：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span><br><span class="line">&lt;merge xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;</span><br><span class="line"></span><br><span class="line">    &lt;ImageView</span><br><span class="line">        android:layout_width=&quot;wrap_content&quot;</span><br><span class="line">        android:layout_height=&quot;200dp&quot;</span><br><span class="line">        android:src=&quot;@drawable/psb17&quot;/&gt;</span><br><span class="line">&lt;/merge&gt;</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;再就是调用了，跟上一篇的调用方式一样。</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">final PtrFrameLayout ptrFrameLayout = findViewById(R.id.ptr_frame_layout);</span><br><span class="line">    MyCustomHeader myCustomHeader = new MyCustomHeader(this);</span><br><span class="line">    ptrFrameLayout.setHeaderView(myCustomHeader);</span><br><span class="line">    ptrFrameLayout.addPtrUIHandler(myCustomHeader);</span><br><span class="line">    ptrFrameLayout.setPtrHandler(new PtrDefaultHandler2() &#123;</span><br><span class="line">      @Override</span><br><span class="line">      public void onRefreshBegin(PtrFrameLayout frame) &#123;</span><br><span class="line">        frame.postDelayed(ptrFrameLayout::refreshComplete, 2000);</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      @Override</span><br><span class="line">      public void onLoadMoreBegin(PtrFrameLayout frame) &#123;</span><br><span class="line">        frame.postDelayed(ptrFrameLayout::refreshComplete, 2000);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;然后运行，你就会看到，刷新的header就是你的自定义view。到此，自定义刷新布局就完成了，脚布局方式类似。</p>
<p>&emsp;&emsp;什么鬼？这就没了？刷新布局就一个ImageView就没了？这么敷衍。好歹你也加个动画啊。可以可以，那就加个动画。</p>
<p>&emsp;&emsp;如你所愿，我加了一个帧动画。</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span><br><span class="line">&lt;animation-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;</span><br><span class="line">    &lt;item android:drawable=&quot;@drawable/refresh1&quot; android:duration=&quot;100&quot;/&gt;</span><br><span class="line">    &lt;item android:drawable=&quot;@drawable/refresh2&quot; android:duration=&quot;100&quot;/&gt;</span><br><span class="line">    &lt;item android:drawable=&quot;@drawable/refresh3&quot; android:duration=&quot;100&quot;/&gt;</span><br><span class="line">&lt;/animation-list&gt;</span><br></pre></td></tr></table></figure></div>
<p>header里面的改动：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">private void initView() &#123;</span><br><span class="line">    LayoutInflater.from(getContext()).inflate(R.layout.header_layout, this);</span><br><span class="line">    imageView = findViewById(R.id.img);</span><br><span class="line">    animationDrawable = (AnimationDrawable) imageView.getDrawable();</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">   @Override</span><br><span class="line">  public void onUIRefreshBegin(PtrFrameLayout frame) &#123;</span><br><span class="line">    imageView.setImageDrawable(animationDrawable);</span><br><span class="line">    animationDrawable.start();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @Override</span><br><span class="line">  public void onUIRefreshComplete(PtrFrameLayout frame, boolean isHeader) &#123;</span><br><span class="line">    animationDrawable.stop();</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></div>
<p>在初始化的时候，把动画获取到，然后在刷新的时候开始动画，在刷新完成的时候停止动画。</p>

      
    </div>
    
      <footer class="article-footer">
        完
      </footer>
    
  </div>
  
    
<nav id="article-nav">
  <div class="article-nav-block">
    
      <a href="/2018/05/13/Android自定义View——贝赛尔曲线/" id="article-nav-newer" class="article-nav-link-wrap">
        <strong class="article-nav-caption"></strong>
        <div class="article-nav-title">
          
            Android自定义View——贝赛尔曲线
          
        </div>
      </a>
    
  </div>
  <div class="article-nav-block">
    
      <a href="/2018/05/13/Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）/" id="article-nav-older" class="article-nav-link-wrap">
        <div class="article-nav-title">Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）</div>
        <strong class="article-nav-caption"></strong>
      </a>
    
  </div>
</nav>

    
  
  
</article>
</section>
        <aside id="sidebar">
  
    <div class="widget-box">
  <div class="avatar-box avatar-item">
    <img class="avatar" src="/uploads/artistic_image/head.jpg" title="头像来自网络"></img>
    <h3 class="avatar-name">
      
        海晨忆
      
    </h3>
    <p class="avatar-slogan">
      先谋生，再谋爱。人间值得，未来可期。
    </p>
  </div>
</div>


  
    
  <div class="widget-box">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Android-Socket/">Android -Socket</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-加密算法/">Android -加密算法</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-常用功能/">Android -常用功能</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-框架/">Android -框架</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-源码解析/">Android -源码解析</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-自定义view/">Android -自定义view</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-设计模式/">Android -设计模式</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JAVA-并发/">JAVA -并发</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java-SpringBoot/">Java -SpringBoot</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Tomcat/">Tomcat</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/kotlin/">kotlin</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库-JDBC/">数据库 -JDBC</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库-MySQL/">数据库 -MySQL</a></li></ul>
    </div>
  </div>


  
    

  
    
  
    
  <div class="widget-box">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">July 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">October 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">May 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">March 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">February 2018</a></li></ul>
    </div>
  </div>

  
    
  <div class="widget-box">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/07/27/JAVA—公平锁，非公平锁，悲观锁，乐观锁，死锁/">JAVA—公平锁，非公平锁，悲观锁，乐观锁，死锁</a>
          </li>
        
          <li>
            <a href="/2021/07/19/JAVA—线程同步器AQS/">JAVA—线程同步器AQS</a>
          </li>
        
          <li>
            <a href="/2021/07/07/Android模拟点击/">Android模拟点击</a>
          </li>
        
          <li>
            <a href="/2019/11/27/SpringBoot系列-消息-RabbitMQ-（二十）/">SpringBoot系列-消息(RabbitMQ)（二十）</a>
          </li>
        
          <li>
            <a href="/2019/11/13/SpringBoot系列-Docker（十九）/">SpringBoot系列-Docker（十九）</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-box">
    <h3 class="widget-title">友情链接</h3>
    <div class="widget">
      
        <a class="hrf" style="display: block;" href="https://github.com/haichenyi" title target='_blank'
        >Github</a>
      
        <a class="hrf" style="display: block;" href="https://www.jianshu.com/u/6077ee440c37" title target='_blank'
        >简书</a>
      
        <a class="hrf" style="display: block;" href="https://blog.csdn.net/qq_27634797" title target='_blank'
        >CSDN</a>
      
    </div>
  </div>

  
</aside>
      </div>
      <footer id="footer">
  <div class="foot-box footers global-width">
    &copy;2017-2021 海晨忆 &nbsp;&nbsp;
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">阁下是第<span id="busuanzi_value_site_pv"></span>个访客</span>
  </div>
</footer>
      <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
if (!window.jQuery) {
var script = document.createElement('script');
script.src = "/js/jquery-2.0.3.min.js";
document.body.write(script);
}
</script>

  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



    </div>
    <nav id="mobile-nav" class="mobile-nav-box">
  <div class="mobile-nav-img mobile-nav-top"></div>
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">归档</a>
  
    <a href="/about" class="mobile-nav-link">简历</a>
  
  <div class="mobile-nav-img  mobile-nav-bottom"></div>
</nav>    
  </div>
</body>
</html>